<template>
  <div id="xiang">
    <div class="nav">
      <router-link to="/" tag="div">
        &lt;
      </router-link>
      <nav>
        {{xiang.author_name}}
      </nav>
      <router-link to="" tag="div">
        ...
      </router-link>
    </div>
    <div class="cont">
      <div v-show="false">
        {{b=(()=>{return xiang.imgarr.split(";")})()}}
      </div>
      <swiper v-if="b.length>0" :options="swiperOption" class="swiper-two">
        <swiper-slide v-for="(i,index) in b" :key="index" class="swiper-slide_two">
          <router-link to="">
            <img :src="b" alt="">
          </router-link>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data: () => ({
    swiperOption: {
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      // autoplay: {
      //   // disableOnInteraction: false,
      //   delay: 1000
      // },
      //开启无限循环
      loop: true
    },
    xiang: ""
  }),
  created() {
    console.log(this.$route.params.id);
    let id = this.$route.params.id;
    this.$http
      .get("/api/menu/menuList")
      .then(result => {
        console.log(result);
        for (let i of result.data) {
          if (i.ID == id) {
            this.xiang = i;
          }
        }
        // this.list = result.data;
        console.log(this.xiang);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style lang="scss">
#xiang {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .nav {
    width: 100%;
    height: 2.5rem;
    display: flex;
    background: #ff6767;
    align-items: center;
    flex-shrink: 0;
    color: white;
    > div {
      width: 2.5rem;
      font-size: 1rem;

      text-align: center;
      font-weight: bold;
      &:nth-child(1) {
        > img {
          width: 50%;
        }
      }
      &:nth-child(3) {
        > img {
          width: 30%;
        }
        > span {
          display: block;
          font-size: 12px;
        }
      }
    }
    > nav {
      // width: 100%;
      flex-grow: 1;
      height: 2.5rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
